<template>
    <h1>D - VUE实例生命周期</h1>
    <div>
        {{name}}

        <button @click="upateName">update</button>
        <button @click="destroy">destroy</button>
    </div>    
</template>

<script>
export default {
    data(){
        return {
            name: ''
        }
    },
    methods: {
        upateName(){
            console.log('准备修改名字啦！')
            this.name = 'hello 慕课！'
        },
        destroy(){
            // vm.$destroy()

            this.$destroy()  // ??? 一直报错 todo 待解决
        }
    },
     beforeCreate() {
      // 此时页面数据未初始化
      console.log('beforeCreate:' + this.name) // beforeCreate： undefined
    },
    created() {
      // 页面数据已经初始化
      console.log('created:' + this.name) // beforeCreate： hello !
    },
    beforeMount() {
      console.log('beforeMount:' + this.name) // beforeCreate： hello !
    },
    mounted() {
      console.log('mounted:' + this.name) // beforeCreate： hello !
    },
    // 点击更新按钮后会先触发 beforeUpdate
    beforeUpdate() {
      console.log('beforeUpdate:' + this.name) // beforeCreate： hello 慕课！
    },
    updated() {
      console.log('updated:' + this.name) // updated hello 慕课 !
    },
    // 点击销毁按钮后会先触发 beforeDestroy
    beforeUnmount(){
      console.log('beforeDestroy: before destroy') // beforeDestroy: before destroy
    },
    unmounted(){
      console.log('destroyed: success') // destroyed: success
      // 在这之后点击页面 更新 按钮将无任何效果
    }
}
</script>